<template>
	<div>
		<sh-card title="基础抽屉" class="mb-3">
			<sh-button status="primary" @click="value = true">Open</sh-button>
			<sh-drawer v-model="value" title="Basic sh-drawer" draggable destroy-on-close>
				<div style="height: 2000px">345435</div>
				<p>Some contents...</p>
				<p>Some contents...</p>
				<p>Some contents...</p>
				<template #footer>
					<div>123</div>
				</template>
			</sh-drawer>
		</sh-card>
		<sh-card title="其它方向" class="mb-3">
			<sh-button status="primary" @click="value1 = true">Left</sh-button>
			<sh-drawer v-model="value1" title="Basic sh-drawer" placement="left" draggable :closable="false">
				<p>Some contents...</p>
				<p>Some contents...</p>
				<p>Some contents...</p>
			</sh-drawer>
			<sh-button status="primary" @click="value2 = true">Top</sh-button>
			<sh-drawer v-model="value2" title="Basic sh-drawer" placement="top" draggable :closable="false">
				<p>Some contents...</p>
				<p>Some contents...</p>
				<p>Some contents...</p>
			</sh-drawer>
			<sh-button status="primary" @click="value3 = true">Bottom</sh-button>
			<sh-drawer v-model="value3" title="Basic sh-drawer" placement="bottom" draggable :closable="false">
				<p>Some contents...</p>
				<p>Some contents...</p>
				<p>Some contents...</p>
			</sh-drawer>
		</sh-card>
		<sh-card title="多层抽屉" class="mb-3">
			<sh-button status="primary" @click="value4 = true">Open sh-drawer</sh-button>
			<sh-drawer v-model="value4" title="Multi-level drawer" width="512" :closable="false">
				<sh-button status="primary" @click="value5 = true">Two-level sh-drawer</sh-button>
			</sh-drawer>
			<sh-drawer v-model="value5" title="Two-level sh-drawer" :closable="false"> This is two-level drawer. </sh-drawer>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseshDrawer',
	data() {
		return {
			value: false,
			value1: false,
			value2: false,
			value3: false,
			value4: false,
			value5: false
		}
	}
}
</script>

<style scoped lang="scss"></style>
